<template>
  <view class="viewpoint">
    <!-- 上 -->
    <view class="Top">
      <!-- 标题 -->
      <view class="title">
        <text>{{ newsform?.title }}</text>
      </view>
      <!-- 图片 -->
      <view class="newsimg">
        <view class="three">
          <uni-file-picker
            fileMediatype="image"
            mode="grid"
            v-model="fileLists"
            @select="select"
            @delete="delIMG"
            :list-styles="listStyles"
            limit="3"
          ></uni-file-picker>
        </view>
      </view>
      <!-- 用户名称 -->
      <view class="username">
        <text>{{ memberStore.profile?.user.username }}</text>
      </view>
      <!-- 选项 -->
      <view class="select" v-if="range.length != 0">
        <uni-data-select
          v-model="value"
          placeholder="请选择类别"
          :localdata="range"
          @delete="delIMG"
        ></uni-data-select>
      </view>
    </view>

    <!-- 按钮 -->
    <view class="button">
      <button class="draft" @tap="draft">存草稿</button>
      <button class="delete" @tap="deleteNews">删除</button>
      <button class="publish" @tap="change">发布</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useMemberStore } from '@/stores/modules/member'
import type { newsItem, fileItem } from '@/types/news'
import type { category } from '@/types/index'
import { ref, defineProps } from 'vue'
import { getCatrgoryAPI } from '@/services/news'
import { onLoad } from '@dcloudio/uni-app'
import { PublishNewsAPI, modifyNewsAPI, deleteNewsAPI } from '@/services/editor'
import { baseURL } from '@/utils/http'
const memberStore = useMemberStore()

//接收页面传递参数
const query = defineProps<{ newsform: string }>()
let newsform = ref<newsItem>()
newsform.value = JSON.parse(decodeURIComponent(query.newsform))
const value = ref(newsform.value!.categoryId) //分类id
const fileLists = ref<any>([])
newsform.value.newsImg.forEach((e: string) => {
  fileLists.value.push({ url: e, name: e })
})

//图片样式
const listStyles = ref({
  border: true,
  // 线条样式
  borderStyle: {
    width: 1,
    color: 'blue',
    radius: 2,
  },
})

let range = ref<{ value: number; text: string }[]>([])
//点击确认修改
const change = async () => {
  if (fileLists.value.length == 0 || value.value == 0) {
    uni.showToast({ icon: 'none', title: '填写完整信息' })
    return
  }
  //初始化数据
  newsform.value!.account = memberStore.profile!.user.account
  newsform.value!.newsImg = []
  fileLists.value.forEach((v: any) => {
    newsform.value!.newsImg.push(v.url)
  })
  newsform.value!.categoryId = value.value
  newsform.value!.releaseTime = new Date().getTime()
  newsform.value!.status = 0
  //调用修改接口
  const res = await modifyNewsAPI(newsform.value!)
  if (res.code == 200) {
    uni.showToast({ icon: 'none', title: '修改成功,等待重新审核' })
    uni.switchTab({
      url: '/pages/index/index',
    })
  }
}
//当点击草稿
const draft = async () => {
  if (fileLists.value.length == 0 || value.value == 0) {
    uni.showToast({ icon: 'none', title: '填写完整信息' })
    return
  }
  //初始化数据
  newsform.value!.account = memberStore.profile!.user.account
  fileLists.value.forEach((v: any) => {
    newsform.value!.newsImg.push(v.url)
  })
  newsform.value!.categoryId = value.value
  newsform.value!.releaseTime = new Date().getTime()
  newsform.value!.status = -1
  const res = await PublishNewsAPI(newsform.value!)
  if (res.code == 200) {
    uni.showToast({ icon: 'none', title: '已存入草稿箱' })
    uni.switchTab({ url: '/pages/my/my' })
  }
}
//选择图片
const select = (e: fileItem) => {
  const imgUrl = e.tempFilePaths[0]
  uni.uploadFile({
    url: baseURL + '/upload',
    filePath: imgUrl,
    name: 'image',
    success: (uploadFileRes) => {
      let path = JSON.parse(uploadFileRes.data)
      //后端返回的地址，存入图片地址
      console.log(JSON.parse(uploadFileRes.data))
      fileLists.value.push({ url: path.data, name: imgUrl })
    },
  })
}
//删除一张图片
const delIMG = (e: any) => {
  console.log(e.tempFilePath)

  const num = fileLists.value.findIndex((v: any) => v.name === e.tempFilePath)
  console.log(num)
  fileLists.value.splice(num, 1)
  console.log('删除后', fileLists.value)
}
//拿到分类数据
const getCategory = async () => {
  const res = await getCatrgoryAPI()
  res.data.forEach((v: category) => {
    range.value.push({ value: v.value, text: v.name })
  })
}
//删除新闻
const deleteNews = async () => {
  uni.showModal({
    title: '提示',
    content: '确定删除新闻吗？',
    success: async (res) => {
      if (res.confirm) {
        const res = await deleteNewsAPI(newsform.value?.newsId)
        if (res.code == 200) {
          uni.showToast({ icon: 'none', title: '删除成功' })
          uni.switchTab({ url: '/pages/index/index' })
        }
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    },
  })
}
onLoad(() => {
  getCategory()
})
</script>

<style lang="scss">
page {
  height: 100%;
}
.viewpoint {
  height: 100%;
  border-top: 1rpx #ccc solid;
  padding: 10rpx 10rpx;
  position: relative;
  .title {
    padding: 10rpx 0;
    font-size: 40rpx;
    color: #000;
    font-weight: bold;
    overflow: hidden; /* 或者使用 overflow: auto; */
    white-space: nowrap;
    text {
      white-space: normal;
    }
  }
  .newsimg {
  }
  .username {
    height: 100rpx;
    padding: 0 20rpx;
    line-height: 100rpx;
    text-align: left;
    color: #757070;
    border-bottom: #ccc 1rpx solid;
  }
  .select {
    height: 100rpx;
    // display: flex;
    justify-content: space-between;
    .R,
    .L {
      text-align: center;
      line-height: 100rpx;
    }
    .L {
      color: #000;
      font-size: 32rpx;
      font-weight: bold;
    }
    .R {
      color: #979393;
      font-size: 28rpx;
    }
  }
  .button {
    display: flex;
    width: 100%;
    position: absolute;
    bottom: 100rpx;
    .draft {
      width: 200rpx;
      background-color: #fefefe;
      border: 1rpx #747070 solid;
      color: #747070;
      height: 100rpx;
    }
    .delete {
      width: 200rpx;
      background-color: #fefefe;
      border: 1rpx #747070 solid;
      color: #747070;
      height: 100rpx;
    }
    .publish {
      background-color: #f22121;
      width: 200rpx;
      color: #fff;
      height: 100rpx;
    }
  }
}
.select::v-deep .uni-stat__select {
  width: 100%;
  margin-top: 20rpx;
  height: 100%;
}
.select::v-deep .uni-stat__select .uni-select {
  height: 100rpx;
}
.select::v-deep .uni-stat__select .uni-select .uni-select {
  border: none;
}
.select::v-deep .uni-stat__select .uni-select .uni-select__input-placeholder {
  font-size: 32rpx;
}
</style>